import { memo } from 'react'
import styles from './index.module.scss'
import { useHistory, useLocation } from 'react-router-dom'
import Icon from '../components/icon'
import classNames from 'classnames'
import { renderRoutes } from 'react-router-config'
const buttons = [
  { id: 1, title: '首页', to: '/home', icon: 'iconbtn_home' },
  { id: 2, title: '问答', to: '/home/question', icon: 'iconbtn_qa' },
  { id: 3, title: '视频', to: '/home/video', icon: 'iconbtn_video' },
  { id: 4, title: '我的', to: '/home/profile', icon: 'iconbtn_mine' },
]
export default memo(function Layout(props: any) {
  const history = useHistory()
  const location = useLocation()
  return (
    <div className={styles.root}>
      {/* 区域一：点击按钮切换显示内容的区域 */}
      <div className="tab-content">{renderRoutes(props.route.routes)}</div>

      {/* 区域二：按钮区域，会使用固定定位显示在页面底部 */}
      <div className="tabbar">
        {buttons.map((i) => {
          const selected = location.pathname === i.to
          return (
            <div
              key={i.id}
              className={classNames(
                'tabbar-item',
                selected ? 'tabbar-item-active' : ''
              )}
              onClick={() => history.push(i.to)}
            >
              <Icon type={i.icon + (selected ? '_sel' : '')} />
              <span>{i.title}</span>
            </div>
          )
        })}
      </div>
    </div>
  )
})
